<script lang="ts">
	import { goto } from "$app/navigation";
	import { afterNavigate } from "$app/navigation";
	import { search } from "$lib/api/lzizy/interface";
	import { appState } from "../stores/state.svelte";
	import { webviewWindow } from "@tauri-apps/api";
	
	let { children:page } = $props();

	let currentPath:string = $state("/"); // 当前路由
	let isMaximizable = false; // 窗口是否处于最大化状态
	// let isMaximizable = $derived(currentPath.includes("/info/play"));

	// 监听应用程序导航路由
	afterNavigate(({from, to}) => {
		currentPath = to!.route.id!;
		console.log(`[currentPath]: ${currentPath}`);
		console.log(`[inputBoxValue]: ${appState.searchName}`);
	});

	// 导航栏双击事件，最大化/还原
	async function dragRegion_DblClick() {
		if(!currentPath.includes("/info/play")) return;
		try {
			if(isMaximizable) {
				await webviewWindow.getCurrentWebviewWindow().unmaximize();
				isMaximizable = false;
			} else {
				await webviewWindow.getCurrentWebviewWindow().maximize();
				isMaximizable = true;
			}
		} catch {
			console.log(`执行最大化或还原最大化时发生异常！`);
		}
	}

	// 导航 - 返回按钮
	async function on_BackClick(e:Event) {
		// 当从播放页面返回时，将窗口还原到默认大小状态
		if(currentPath.includes("/info/play")) {
			await webviewWindow.getCurrentWebviewWindow().setFullscreen(false);
			await webviewWindow.getCurrentWebviewWindow().unmaximize();
		}
		window.history.back();
	}

	async function searchHandle(e:KeyboardEvent) {
		if(e.key == "Enter") {
			appState.searchList = await search(appState.searchName);
		}
		// console.log(`输入完成: ${e.key}`)
	}
</script>
<main style:display={ currentPath.includes("/info/play") ? "block" : "grid"}>
	<div class="nav-bar" style:position={currentPath.includes("/info/play") ? "absolute" : "static"} data-tauri-drag-region ondblclick={dragRegion_DblClick}>
		<!-- 返回按钮 -->
		{#if currentPath !== "/"}
			<div class="button" onclick={on_BackClick}>
				<a class={'icon icon-circular_arrow_left'}></a>
			</div>
		{:else}
			<div style="pointer-events: none;"></div>
		{/if}
		<!-- 搜索框/标题 -->
		{#if currentPath.includes("/info") == false}
			<div class="search-box" onclick={() => {if(currentPath.includes("/search") == false) goto("/search");}}>
				<form action="#">
					<input type="text" bind:value={appState.searchName} onkeydown={searchHandle}>
				</form>
			</div>
		{:else}
			<div class="title">
				<p>{currentPath.includes("/info/play") ? (appState.playItem?.name +"："+ appState.playItem?.play_infos[appState.playIndex].title) : appState.playItem?.name}</p>
			</div>
		{/if}
	</div>

	{@render page?.()}
</main>

<style lang="scss">
	$title-height: 50px;
	
	main {
		width: 100vw; height: 100vh;
		color: rgb(255, 255, 255); background-color: rgb(49, 49, 49);
		
		display: grid;
		grid-template-rows: $title-height 1fr;
	}

	.nav-bar {
		$padding-size: 10px;

		width: 100%; height: $title-height;
		padding: $padding-size;
		display: grid;
		grid-template-columns: $title-height auto $title-height;
		z-index: 100;

		.button {
			width: ($title-height - ($padding-size * 2)); height: ($title-height - ($padding-size * 2));
			outline: 1px solid white;
			border-radius: 100%;
			display: flex;
			
			& > a {
				margin: auto;
				text-decoration: none;
			}
		}
		
		input[type="search"] {
			border-radius: 25px;
		}
	}

	.search-box {
		width: 100%; height: 100%;
		display: flex;
		justify-content: center;
		pointer-events: none;

		& > form {
			width: 60%;
			background-color: rgba(255, 255, 255, 0.268);
			padding-left: 15px;
			display: flex;
			justify-content: start;
			border-radius: 30px;
			pointer-events: all;

			& > input[type="text"] {
				width: calc(100% - 30px);
				color: white; background-color: transparent;
				font-size: 18px;
				text-align: center;
			}
		}
	}

	.title {
		width: 100%; height: 100%;
		display: flex;
		font-size: 1.25rem; font-weight: bold;
		pointer-events: none;

		p {
			margin: auto;
		}
	}
</style>